<template>
  <div class="articleList">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span class="text">文章列表</span>
        </div>
        <el-row type="flex" class="row-bg" justify="space-between">
          <div class="from">
              <!-- 横向表单 -->
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="文章分类" >
                    <el-select v-model="formInline.class" placeholder="请选择分类" >
                    <el-option v-for="(item) in classData" :key= "item.id" :label="item.cate_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发布状态">
                    <el-select v-model="formInline.state" placeholder="请选择状态">
                    <el-option v-for="(item) in stateList" :key= "item.id" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button class="selectButton" @click="filtrate">筛选</el-button>
                    <el-button class="resetButton" @click="resetForm">重置</el-button>
                </el-form-item>
              </el-form>
          </div>
          <el-button class="sendButton" @click="newArticle">发表文章</el-button>
        </el-row>

        <!-- 发表文章按钮 -->

        <el-table
        :data="articleList"
        border
        style="width: 100%">
            <el-table-column
            prop="title"
            label="文章标题"
            width="382">
            </el-table-column>
            <el-table-column
            prop="cate_name"
            label="分类"
            width="120">
            </el-table-column>
            <el-table-column
            prop="pub_date"
            label="发表时间"
            width="200">
            </el-table-column>
            <el-table-column
            prop="state"
            label="状态"
            width="200">
            </el-table-column>
            <el-table-column
            label="操作"
            width="166">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="primary"
                @click="openDialog('change',scope.row.id)">修改</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="openDialog('del',scope.row.id)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
         <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagenum"
            background
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
    </el-card>
  </div>
</template>

<script>
import { initArticleList, InitClass, delArticle } from '@/api/other'
export default {
  data () {
    return {
      articleList: [
      ],
      classData: [],
      stateList: ['已发布', '草稿'],
      formInline: {
        class: '',
        state: ''
      },
      total: 10,
      pagenum: 1,
      pagesize: 10
    }
  },
  mounted () {
    document.querySelector(
      '.el-pagination__jump'
    ).childNodes[0].nodeValue = '跳至'
  },
  created () {
    this.InitClassAction()
    this.initArticleListAction()
  },
  methods: {
    // 每页多少条
    handleSizeChange (val) {
      this.pagesize = val
      this.initArticleListAction()
    },
    // 当前为多少页
    handleCurrentChange (val) {
      this.pagenum = val
      this.initArticleListAction()
    },
    // 渲染分类数据
    async InitClassAction () {
      try {
        const res = await InitClass()
        // 等有数据时候使用
        this.classData = res.data
      } catch (e) {
        console.log(e)
      }
    },
    // 渲染文章数据
    async initArticleListAction () {
      try {
        const res = await initArticleList(this.pagenum, this.pagesize, this.formInline.class, this.formInline.state)
        // 等有数据时候使用
        this.articleList = (res.data).map((k) => {
          const date = new Date(k.pub_date)
          k.pub_date = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
          return k
        })
        this.total = res.total
        console.log(res)
      } catch (e) {
        console.log(e)
      }
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    // 筛选
    filtrate () {
      this.initArticleListAction()
    },
    // 重置
    resetForm () {
      this.formInline = {
        class: '',
        state: ''
      }
      this.initArticleListAction()
    },
    // 发表文章
    newArticle () {
      this.$router.push('/article/newArticle')
    },
    async openDialog (type, id) {
      if (type === 'change') {
      // 修改文章
        this.$router.push(`/article/newArticle?id=${id}`)
      } else if (type === 'del') {
        // 删除文章
        try {
          const res = await delArticle(id)
          console.log(res)
          this.initArticleListAction()
        } catch (e) {
          console.log(e)
        }
      }
    }

  }
}
</script>

<style lang='scss' scoped>
  .box-card {
    width: 1126px;

    ::v-deep .el-card__header{
      padding: 18px 30px;
      height: 68px;
      .text {
        font-size: 16px;
        margin: 5px 0;
        font-weight: 600;
      }
    }
    // 修改单元格左侧padding
    ::v-deep .el-table th.el-table__cell ,
    ::v-deep .el-table td.el-table__cell {
       padding-left: 14px;
       height: 42px;
    }

    // 修改表头字体颜色
    ::v-deep .el-table th.el-table__cell{
        color: rgba($color: #000000, $alpha: 0.4);
    }
    // 修改内容字体颜色
    ::v-deep .el-table td.el-table__cell{
        color: rgba($color: #131523, $alpha: 0.9);
    }
    //横向表单样式
    .from{
      // 修改表单label样式
      ::v-deep .el-form-item__label{
          color: rgba(0,0,0,0.4);
          font-size: 14px;
      }
      // 修改表单下拉框样式
      ::v-deep .el-input__inner {
         width: 240px;
         height: 32px;
      }
      ::v-deep .el-select .el-input .el-select__caret {
          color: #b8b8b8;
          font-size: 14px;
          transition: transform 0.3s;
          cursor: pointer;
          &.is-reverse{
            color: #0052d9;
          }
      }
      // 修改表单下拉框选中样式
      ::v-deep .el-select .el-input.is-focus .el-input__inner {
          border: 1px solid #0052d9;
      }
      // 按钮效果
      .selectButton,.resetButton{
        padding: 5px 16px;
        width: 60px;
        height: 32px;
      }
      .selectButton{
        background-color: #4F81FF ;
        color: #FFF;
        &:hover{
            background-color:#608DFF ;
        }
      }
      .resetButton{
        background-color: #EAECF5;
        color: #0052D9;
        &:hover{
            background-color:#F5F6FA ;
        }
      }
    }
    .sendButton{
      padding: 5px 16px;
      width: 88px;
      height: 32px;
      background-color: #4F81FF ;
      color: #FFF;
      &:hover{
          background-color:#608DFF ;
      }
    }
    .block{
      margin: 35px 0 25px;
    }
    // .text {
    // font-size: 14px;
    // }
    // .item {
    //     margin-bottom: 18px;
    // }
    // .clearfix:before,
    // .clearfix:after {
    //     display: table;
    //     content: "";
    // }
    // .clearfix:after {
    //     clear: both
    // }
  }
</style>
